<template>
  <div class="productContainer">
    <div class="styleOne" v-for="(item,k) in list" :key="k">
      <div class="productImages" :style="`background-image:url(${item.backgrond})`"></div>
      <div class="productInfor">
        <div class="itemDes"><span class="shopDes"  @click="giveFather(item.shopDes)">{{item.shopDes}}</span></div>
      </div>
    </div>
  </div> 
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props:{ //3、我来接收从父亲组件拿回来的数据 使用props接收！！！
    list: {    //4、申明下这种数据的类型 这个lists属性就是父组件绑定的:lists 属性名，不能写错了，不然拿不到了！！
        type:Array 
    }
  },
  methods:{
    giveFather(data){ //2.添加事件的方法 data就是item.name的值 并且发布出来
        this.$emit("getData",data)  //3.发布出来this.$emit是固定的写法,第一个参数是发布信息代号的名字驼峰法则,第二个参数是data一样的函数表达式
    }
  }
};
</script>

<style lang="less" scoped>
// .titleText{
//     margin-top: 0.5rem;
//     width: 100%;
//     height: 1rem;
//     text-align: center;
// }  
.productContainer {
  margin-top: 0.2rem;
  height: 3rem;
//   border: 1px solid red;
//   width: 100%;
  display: flex;    
  flex-wrap: wrap;
  justify-content: space-between; 
  .styleOne {
    padding: 0.1rem 0; 
    width: 49%;
  }
  .productImages {
    width: 100%;
    height: 2.5rem;
    // border: 1px solid blue;
    background: url("../../assets/images/hotproducts/1.jpg") no-repeat center left;
    background-size: 100% 100%;
    // background-size: cover;//这个不好因为图片会显示不全
  }
  .productInfor {
    margin-top: 0rem;
    display: flex;
    width: 100%;
    height: 0.5rem;
    text-align: center;
    span{
       display: block; 
       height: 0.5rem;
       line-height: 0.5rem;
       margin-left: 1.2rem; 
       font-size: 0.2rem;
       color: #666;
       font-weight: bold;
    }
    
  }
}
</style>